<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">

<h:head>
	<title>Users Management</title>
</h:head>

<h:body>

	<ui:composition template="common.xhtml">
		<ui:define name="content">
			<f:view>
				<h:form>
					<div class="row">
						<div class="col-lg-12">
							<h1 class="page-header">Users Management</h1>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12">
							<c:if test="${userManagement.msg != null}">
								<div class="alert  alert-info alert-dismissible" role="alert"
									style="margin-top: 8px">
									<button type="button" class="close" data-dismiss="alert">
										<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
									</button>
									${userManagement.msg}
								</div>
							</c:if>
							<div style="margin-bottom: 10px;">
								<h:commandLink action="#{userManagement.navigation()}" value="Add new User"
									class="btn btn-default" />
							</div>
							<div class="panel panel-default">
								<div class="panel-heading text-center">Users List</div>
								<div class="panel-body">
									<div class="row">
										<h:dataTable value="${userManagement.listUser()}"
											var="userList"
											class="table table-striped table-bordered table-hover"
											id="dataTables">
											<h:column>
												<f:facet name="header">User name</f:facet>
												<a href="${userList.userId}"><h:outputText
														value="${userList.userName}" /></a>
											</h:column>
											<h:column>
												<f:facet name="header">Full name</f:facet>
												<h:outputText value="${userList.fullName}" />
											</h:column>
											<h:column>
												<f:facet name="header">Birthday</f:facet>
												<h:outputText value="${userList.birthOfDay}">
													<f:convertDateTime pattern="dd-MM-yyyy" />
												</h:outputText>
											</h:column>
											<h:column>
												<f:facet name="header">Gender</f:facet>
												<h:outputText
													value="${userList.gender > 0 ? 'Male' : 'Female'}" />
											</h:column>
											<h:column>
												<f:facet name="header">Address</f:facet>
												<h:outputText value="${userList.address}" />
											</h:column>
											<h:column>
												<f:facet name="header">Email</f:facet>
												<h:outputText value="${userList.email}" />
											</h:column>
											<h:column>
												<f:facet name="header">Phone</f:facet>
												<h:outputText value="${userList.phoneNumber}" />
											</h:column>
											<h:column>
												<f:facet name="header">Role</f:facet>
												<h:outputText value="${userList.role.roleName}" />
											</h:column>
											<h:column>
												<f:facet name="header">Status</f:facet>
												<h:outputText value="${userList.active}" />
											</h:column>
											<h:column>
												<f:facet name="header">Action</f:facet>
												<div class="btn-group">
													<button type="button"
														class="btn btn-default dropdown-toggle"
														data-toggle="dropdown">
														Action <span class="caret"></span>
													</button>
													<ul class="dropdown-menu" role="menu">
														<li><h:commandLink value="Delete"
																action="#{userManagement.deleteUser(userList.userId)}" /></li>
													</ul>
												</div>
											</h:column>

										</h:dataTable>
									</div>
								</div>
							</div>
						</div>
					</div>
				</h:form>
			</f:view>
		</ui:define>
	</ui:composition>

</h:body>
</html>